<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="/static/img/logo/logo.png" rel="icon">
    <title>Serverless Platform</title>
    <link href="/static/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/static/css/ruang-admin.min.css" rel="stylesheet">
    <script src="/static/vendor/jquery/jquery.min.js"></script>
    <link href="/static/vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
    <script type="text/javascript">
        $(function () {
            $('#deleteFunctionModal').on('show.bs.modal', function (event) {
                const btnThis = $(event.relatedTarget); //触发事件的按钮
                const function_name = btnThis[0].parentNode.parentNode.cells[0].innerText;
                console.log(function_name)
                $("#uid").attr("value", function_name);
            })
            $('#dataTableHover').DataTable(); // ID From dataTable with Hover

        })

        function delete_function(function_name) {
            console.log(function_name);
            $.ajaxSettings.async = false;
            $.post('/function/delete_function', {
                'csrfmiddlewaretoken': '{{ csrf_token }}',
                'function_name': function_name
            }, function (res) {
                if (res['result'] === 'ok') {
                    {#alert('succeed')#}
                    location.reload();
                } else {
                    alert('failed')
                }
            })
        }

        function get_function_infos() {
            $.get('/function/get_openfaas_functions_info2', function (res) {
                const json_res = JSON.parse(res);
                console.log(json_res[0])
            })

        }

        function jump_deploy_function_page() {
            window.location.href = '/function/function_deploy_step_one?username={{ username }}'
        }


    </script>
</head>

<body id="page-top">
<!-- path-->
<div class="d-sm-flex align-items-center justify-content-between">
    <h1 class="h3 mb-0 text-gray-800">Function List</h1>
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page">Function List</li>
    </ol>
</div>
<div class="card mb-4">
    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
        <button type="button" class="btn btn-outline-primary mb-1" onclick="jump_deploy_function_page()">Deploy New
            Functions
        </button>
    </div>
    <div class="table-responsive p-3">
        <table class="table align-items-center table-flush table-hover" id="dataTableHover">
            <thead class="thead-light">
            <tr style="text-align: center">
                <th style="text-align: left">Function Name</th>
                <th style="text-align: left">Image</th>
                <th>NameSpace</th>
                <th>InvocationCount</th>
                <th>Replicas</th>
                <th>AvailableReplicas</th>
                <th>Operation</th>
            </tr>
            </thead>
            <tbody>
            {% for function_info in function_infos %}
                <tr style="text-align: center">
                    <td style="text-align: left"><a
                            href="workspace?username={{ username }}&function_name={{ function_info.name }}">{{ function_info.name }}</a></td>
                    <td style="text-align: left">{{ function_info.image }}</td>
                    <td>{{ function_info.namespace }}</td>
                    <td>{{ function_info.invocationCount }}</td>
                    <td>{{ function_info.replicas }}</td>
                    <td><span
                            class="badge badge-success">{{ function_info.availableReplicas }}
                                            </span>
                    </td>
                    <td>
                        <a href="#" class="btn btn-danger btn-sm" data-toggle="modal"
                           data-target="#deleteFunctionModal">
                            <i class="fas fa-trash"></i>
                        </a>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="deleteFunctionModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                {#                                <h5 class="modal-title" id="function_name_id">#}
                {#                                    function_name#}
                {#                                </h5>#}
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <a class="btn btn-warning" style="margin-right: 10px">
                    <i class="fas fa-exclamation-triangle"></i>
                </a>
                Are you sure you want to delete this function?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Close</button>
                <button id="uid" type="button" class="btn btn-danger" value="" onclick="delete_function(this.value)">
                    Delete
                </button>

            </div>
        </div>
    </div>
</div>


<!-- Scroll to top -->
<a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
</a>

<script src="/static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/static/vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="/static/js/ruang-admin.min.js"></script>
<script src="/static/vendor/chart.js/Chart.min.js"></script>
<script src="/static/js/demo/chart-area-demo.js"></script>

<!-- Page level plugins -->
<script src="/static/vendor/datatables/jquery.dataTables.min.js"></script>
<script src="/static/vendor/datatables/dataTables.bootstrap4.min.js"></script>
</body>

</html>